@model WalkingTec.Mvvm.Doc.FrameworkUserVms.FrameworkAllVM
  <wt:fieldset field-set-style="Simple" title="Row">
  </wt:fieldset>
    <p>Using the row control is the simplest way to create the layout of the page. The main properties of row are:</p>
    <table lay-filter="rowtable">
      <thead>
        <tr>
          <th lay-data="{field:'username', width:200}">Property</th>
          <th lay-data="{field:'joinTime', width:600}">Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>items-per-row</td>
          <td>Number of internal controls per row, enumeration, optional 2,3,4,6,12</td>
        </tr>
        <tr>
          <td>align</td>
          <td>Horizontal, left, right and center</td>
        </tr>
        <tr>
          <td>Colspan</td>
          <td>Can be applied to all controls, and set how many columns to span in the parent container</td>
        </tr>
      </tbody>
    </table>
    <div style="height:10px;">&nbsp;</div>
    <wt:tab>
      <wt:tabheaders>
        <wt:tabheader title="Effect" />
        <wt:tabheader title="Code" />
      </wt:tabheaders>
      <wt:tabcontents>
        <wt:tabcontent>
          <wt:form vm="@Model.Vm" style="max-width:600px;">
            <wt:row items-per-row="ItemsPerRowEnum.Three">
              <wt:textbox field="Vm.Entity.LoginName" />
              <wt:textbox field="Vm.Entity.Password" is-password="true" />
              <wt:textbox field="Vm.Entity.Name" />
              <wt:textbox field="Vm.Entity.CellPhone" colspan="2" />
              <wt:textbox field="Vm.Entity.Address" colspan="3" />
            </wt:row>
            <wt:row align="AlignEnum.Right">
              <wt:submitbutton disabled="true" />
              <wt:closebutton disabled="true" />
            </wt:row>
          </wt:form>
        </wt:tabcontent>
        <wt:tabcontent>
          <wt:code>
&ltwt:form vm="@Model.Vm" width="600"&gt
  &ltwt:row items-per-row="ItemsPerRowEnum.Three"&gt
    &ltwt:textbox field="Vm.Entity.LoginName" /&gt
    &ltwt:textbox field="Vm.Entity.Password" is-password="true" /&gt
    &ltwt:textbox field="Vm.Entity.Name" /&gt
    &ltwt:textbox field="Vm.Entity.CellPhone" colspan="2" /&gt
    &ltwt:textbox field="Vm.Entity.Address" colspan="3" /&gt
  &lt/wt:row&gt
  &ltwt:row align="AlignEnum.Right"&gt
    &ltwt:submitbutton disabled="true" /&gt
    &ltwt:closebutton disabled="true" /&gt
  &lt/wt:row&gt
&lt/wt:form&gt
          </wt:code>
        </wt:tabcontent>
      </wt:tabcontents>
    </wt:tab>

<wt:fieldset field-set-style="Simple" title="Tab">
 </wt:fieldset>
   <p>Use tab to layout tabs. The main properties are:</p>
    <table lay-filter="rowtable">
        <thead>
            <tr>
                <th lay-data="{field:'username', width:200}">Property</th>
                <th lay-data="{field:'joinTime', width:600}">Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>allow-close</td>
                <td>Allow tabs to close,or not</td>
            </tr>
            <tr>
                <td>selected-index</td>
                <td>Default selected tab</td>
            </tr>
            <tr>
                <td>tab-style</td>
                <td>Tab style, Options:default/ simple</td>
            </tr>
        </tbody>
    </table>
    <div style="height:10px;">&nbsp;</div>
    <wt:tab>
        <wt:tabheaders>
            <wt:tabheader title="Effect" />
            <wt:tabheader title="Code" />
        </wt:tabheaders>
        <wt:tabcontents>
            <wt:tabcontent>
                <wt:tab>
                    <wt:tabheaders>
                        <wt:tabheader title="Basic" />
                        <wt:tabheader title="Extra" />
                    </wt:tabheaders>
                    <wt:tabcontents>
                        <wt:tabcontent style="max-width:600px;">
                            <wt:textbox field="Vm.Entity.LoginName" />
                            <wt:textbox field="Vm.Entity.Password" is-password="true" />
                        </wt:tabcontent>
                        <wt:tabcontent style="max-width:600px;">
                            <wt:row items-per-row="ItemsPerRowEnum.Two">
                                <wt:textbox field="Vm.Entity.CellPhone" />
                                <wt:textbox field="Vm.Entity.Address" />
                            </wt:row>
                        </wt:tabcontent>
                    </wt:tabcontents>
                </wt:tab>
            </wt:tabcontent>
            <wt:tabcontent>
                <wt:code>
&ltwt:tab&gt
    &ltwt:tabheaders&gt
        &ltwt:tabheader title="Basic" /&gt
        &ltwt:tabheader title="Extra" /&gt
    &lt/wt:tabheaders&gt
    &ltwt:tabcontents&gt
        &ltwt:tabcontent  width="600"&gt
            &ltwt:textbox field="Vm.Entity.LoginName" /&gt
            &ltwt:textbox field="Vm.Entity.Password" is-password="true" /&gt
        &lt/wt:tabcontent&gt
        &ltwt:tabcontent  width="600"&gt
            &ltwt:row items-per-row="ItemsPerRowEnum.Two"&gt
                &ltwt:textbox field="Vm.Entity.CellPhone" /&gt
                &ltwt:textbox field="Vm.Entity.Address" /&gt
            &lt/wt:row&gt
        &lt/wt:tabcontent&gt
    &lt/wt:tabcontents&gt
&lt/wt:tab&gt
                </wt:code>
            </wt:tabcontent>
        </wt:tabcontents>
    </wt:tab>


<wt:fieldset field-set-style="Simple" title="Panel">
</wt:fieldset>
  <p>Use panel for panel layout. The main properties are:</p>
  <table lay-filter="rowtable">
    <thead>
      <tr>
        <th lay-data="{field:'username', width:200}">Property</th>
        <th lay-data="{field:'joinTime', width:600}">Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>title</td>
        <td>Panel title</td>
      </tr>
      <tr>
        <td>collapsed</td>
        <td> Folded,or not</td>
      </tr>
    </tbody>
  </table>
  <div style="height:10px;">&nbsp;</div>
  <wt:tab>
    <wt:tabheaders>
      <wt:tabheader title="Effect" />
      <wt:tabheader title="Code" />
    </wt:tabheaders>
    <wt:tabcontents>
      <wt:tabcontent>
        <wt:panel style="max-width:600px;" title="这是一个Panel">
          <div style="height:300px">
            <p>Any component can be nested inside</p>
          </div>
        </wt:panel>
      </wt:tabcontent>
      <wt:tabcontent>
        <wt:code>
  &ltwt:panel width="500" title="This is a Panel"&gt
    &ltdiv style="height:300px"&gt
      &ltp&gtAny component can be nested inside&lt/p&gt
    &lt/div&gt
  &lt/wt:panel&gt
        </wt:code>
      </wt:tabcontent>
    </wt:tabcontents>
  </wt:tab>


<wt:fieldset field-set-style="Simple" title="Dialog">
    <p>You can pop up new layers in many ways, such as using LinkButtoncontrol, Action in ListVM, or calling the javascript OpenDialog method provided by the framework directly.</p>
    <wt:tab>
        <wt:tabheaders>
            <wt:tabheader title="Effect" />
            <wt:tabheader title="Code" />
        </wt:tabheaders>
        <wt:tabcontents>
            <wt:tabcontent>
                <wt:linkbutton window-title="This is a dialog" target=" ButtonTargetEnum.Layer"  url="/QuickStart/Intro" text="click me" />
            </wt:tabcontent>
            <wt:tabcontent>
                <wt:code>
&ltwt:linkbutton window-title="This is a dialog" target=" ButtonTargetEnum.Layer" window-width="800" window-height="600" url="/QuickStart/Intro" text="click me" /&gt
                </wt:code>
            </wt:tabcontent>
        </wt:tabcontents>
    </wt:tab>

</wt:fieldset>

<script>
layui.use('code',function(){layui.code({ about: false })})
</script>
<script>
    layui.table.init('rowtable',{
        limit: 100, page: false
        });
</script>
<script>
  $("#@Model.ViewDivId").parent().css("height", "auto");
</script>
